<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局混入</title>
</head>
<body>
    <h2>全局混入</h2>
    <h3>混入概念</h3>
    <p>
        混入是定一个对象，作为其它对象的原始基础对象，其它对象在创建时将该对象中的属性作为默认属性。
    </p>
    <p>
        Vue支持混入这种开发思想，可以定义一个任意对象，对象中的methods,data,computed,filter,watch等等属性，可以用作创建Vue对象时的默认值。
    </p>
    <h3>混入的作用</h3>
    <ul>
        <li>减少重复代码，把多个对象都要用到的属性、方法提取出来。</li>
    </ul>
    <div id="app1">
        <p @click="sayHello">{{fullName}}，年龄：{{age}}</p>
    </div>
    <div id="app2">
        <p @click="sayHello">{{fullName}}，年龄：{{age}}</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let obj = {
        // Vue对象中data属性：
        // vue不太推荐，data {} ，这种直接把data定义为一个对象的方式，特别如果涉及到对象被复用的情况，会产生大麻烦。
        // vue推荐的方式是，把data定义为一个方法，然后返回一个新对象
        data() {
            return {
                firstName: "Hydra",
                lastName: "Feng",
                age: 35
            }
        },
        methods: {
            sayHello() {
                console.log(this.fullName + "说：“你好！”")
            }
        },
        computed: {
            fullName() {
                return this.firstName + " " + this.lastName;
            }
        }
    }

    // 全局混入
    Vue.mixin(obj);

    new Vue({
        el: "#app1",
        data() {
            return {
                lastName: "Zhang",
                age: 18
            }
        }
    });

    new Vue({
        el: "#app2"
    });
</script>
</html>